<template>
	<view class="container">
		
		<view class="header">
			<view class="title">
				当前积分
			</view>
			<view class="value">
				{{integralCount}}
			</view>
		</view>
		<view class="section">
			<view class="title">
				新手福利
			</view>
			<EarnItem  v-for='item in new_rank' :icon="item.integralIcon" :title="item.integralName" :integral='item.membershipValues[0].integralValue' :desc="item.remark" :complete="item.flag" :key='item'/>
		</view>
		
		<view class="section">
			<view class="title">
				日常任务
			</view>
				<EarnItem  v-for='item in day_rank' :icon="item.integralIcon" :title="item.integralName" :integral='item.membershipValues[0].integralValue' :desc="item.remark"  :key='item'/>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	import EarnItem from '../../components/page-componnet/earn-integral-item.vue';
	export default {
		components:{
			EarnItem	
		},
		data() {
			return {
				integralCount: 0,
				new_rank:[],
				day_rank:[]
			}
		},
		computed: {
			...mapState('userStore', [ 'userInfo']),
		},
		onLoad() {
			this.reqIntegral();
			this.selectMyRights()
		},
		methods: {
			reqIntegral(){
				this.$request.get({
					url: 'manager/UserAllIntegral/selectMyIntegral',
					data: {},
				}).then(info => {
					this.integralCount = info;
				}, res => {});
			},
			selectMyRights(){
				this.$request.post({
					url:'manager/IntegralRecord/selectMyRights',
					data:{
						memberGrade:this.userInfo.vipLevel,
						rankOne:1000
					}
				}).then(async res=>{
					let data = res.filter(v=>{
						return v.rankTwoName=='新手福利'
					})
					let data2 = res.filter(v=>{
						return v.rankTwoName=='日常任务'
					})
					for(let k of data){
						this.$request.get({
							url:'UserIntegralHistory/selectUserHistoryofMyBycondition',
							data:{
								rankTwoOf:k.rankTwo,
								intergralNameId:k.interalNameId
							}
						}).then(r=>{
							if(r.length==0){
								k.flag	= false
							}else{
								k.flag	= true
							}
						})
					}
					for(let k of data2){
						let r =  await this.$request.get({
							url:'UserIntegralHistory/selectUserHistoryofMyBycondition',
							data:{
								rankTwoOf:k.rankTwo,
								intergralNameId:k.interalNameId
							}
						})
						if(r.length==0){
							k.flag	= false
						}else{
							k.flag	= true
						}
					}
					this.new_rank = data;
					this.day_rank = data2;
					
					console.log(data2)
				})
			},
			
			
			
		}
	}
</script>

<style scoped lang="less">
	.container{
		width: 100%;
		min-height: 100vh;
		background-color: #F4F5F8;
		
		.header{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 250upx;
			background: url('https://www.innovationgloble.com/wxs/img/wx/earn-head.png') no-repeat center;
			background-size: cover;
			.title{
				color: #FFFFFF;
				font-size: 28upx;
			}
			
			.value{
				color: #FFFFFF;
				font-size: 70upx;
			}
		}
		
		.section{
			padding: 50upx 36upx;
			box-sizing: border-box;
			margin-bottom: 16upx;
			background-color: #fff;
			.title{
				font-size: 32upx;
				color: #333333;
				margin-bottom: 50upx;
			}
		}
	}
</style>
